<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Node;
use LowCode\Support\JsExp;
use LowCode\Traits\Props\HasBordered;
use LowCode\Traits\Props\HasColor;
use LowCode\Traits\Props\HasRound;
use LowCode\Traits\Props\HasSize;

/**
 * 头像组件 NAvatar
 * @url https://www.naiveui.com/zh-CN/light/components/avatar#Avatar-Props
 * @method static static make(string|JsExp $src = "",mixed $children = null) Avatar组件
 */
class Avatar extends Naive
{

    use HasBordered, HasColor, HasRound, HasSize;

    public function __construct(string|JsExp $src = "", mixed $children = null)
    {
        parent::__construct();
        $this->src($src);
        $this->children($children);
    }

    /**
     * 设置组件大小尺寸
     * @param string|int|JsExp $size 'small' | 'medium' | 'large'
     * @return $this
     */
    public function size(string|int|JsExp $size = 'small' | 'medium' | 'large'): static
    {
        return $this->prop('size',$size);
    }


    /**
     * 头像的地址
     * @param string|JsExp $src
     * @return $this
     */
    public function src(string|JsExp $src): static
    {
        return $this->prop('src', $src);
    }

    /**
     * 头像加载失败时显示的图片的地址
     * @param string|JsExp $src
     * @return $this
     */
    public function fallbackSrc(string|JsExp $src): static
    {
        return $this->prop('fallbackSrc', $src);
    }

    /**
     * 是否在进入 intersection-observer-options 配置的视口之后再开始加载
     * @param bool|JsExp $bool
     * @return $this
     */
    public function lazy(bool|JsExp $bool = true): static
    {
        return $this->prop('lazy', $bool);
    }

    /**
     * 组件中 img 元素的属性
     * @param array|JsExp $props
     * @return $this
     */
    public function imgProps(array|JsExp $props): static
    {
        return $this->prop('imgProps', $props);
    }

    /**
     * lazy=true 时 intersection observer 观测的配置
     * @param array|JsExp $options { root?: Element | Document | string | null, rootMargin?: string, threshold?: number | number[]; }
     * @return $this
     */
    public function options(array|JsExp $options): static
    {
        return $this->prop('intersectionObserverOptions', $options);
    }

    /**
     * 头像的图片在容器内的的适应类型
     * @param string|JsExp $size 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
     * @return $this
     */
    public function objectFit(string|JsExp $size = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'): static
    {
        return $this->prop('objectFit',$size);
    }

    /**
     * 加载失败的渲染函数
     * ()=>{ return Vue.h(...) }
     * @param string $value () => VNodeChild
     * @return $this
     */
    public function renderFallback(string $value, string $id = null): static
    {
        return $this->jsFunction('renderFallback',$value, $id);
    }

    /**
     * 占位的渲染函数
     * ()=>{ return Vue.h(...) }
     * @param string $value  () => VNodeChild
     * @return $this
     */
    public function renderPlaceholder(string $value, string $id = null): static
    {
        return $this->jsFunction('renderPlaceholder',$value, $id);
    }

    /**
     * 头像的图片加载失败执行的回调
     * ()=>{ return Vue.h(...) }
     * @param string $event
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onError(string $event, string $id = null, array $modifiers = []): static
    {
        return $this->event('error',jsFn($event, $id), $modifiers);
    }

    /**
     * 加载失败的内容 slot fallback
     * @param Node $node
     * @return $this
     */
    public function slotFallback(Node $node): static
    {
        return $this->addSlot($node,'fallback');
    }

    /**
     * 图像没有完成加载时候的占位 slot placeholder
     * @param Node $node
     * @return $this
     */
    public function slotPlaceholder(Node $node): static
    {
        return $this->addSlot($node,'placeholder');
    }
}
